<template>
  <div class="add">
    <el-dialog
      title="添加古城"
      :visible.sync="show"
      width="900px"
      @open="openCallback"
    >
      <!-- 工具栏 -->
      <div class="head-search-container">
        <!-- 搜索 -->
        <el-form
          :inline="true"
          label-position="right"
          label-width="74px"
          size="small"
          :model="searchQuery"
          class="demo-form-inline"
        >
          <el-form-item label="古城名称">
            <el-input
              class="search-btn"
              size="small"
              :clearable="true"
              v-model="searchQuery.name"
              placeholder="输入名称搜索"
              @change="search()"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="success"
              class="greenColor"
              @click="search"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              class="greenColor"
              @click="confirmAdd"
              :loading="submitting"
              >{{ submitText }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          label="古城名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="古城简介" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.oldCityProperty">{{
              scope.row.oldCityProperty.shortIntroduction
                ? scope.row.oldCityProperty.shortIntroduction
                : "暂无"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="现今国家" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.oldCityProperty">{{
              scope.row.oldCityProperty.currentCountry
                ? scope.row.oldCityProperty.currentCountry
                : "暂无"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所在区域" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.oldCityProperty">{{
              scope.row.oldCityProperty.locationRegion
                ? scope.row.oldCityProperty.locationRegion
                : "暂无"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所在大洲" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.oldCityProperty">{{
              scope.row.oldCityProperty.continent
                ? scope.row.oldCityProperty.continent
                : "暂无"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="语言/文化圈" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.oldCityProperty">{{
              scope.row.oldCityProperty.languageCulturalCircle
                ? scope.row.oldCityProperty.languageCulturalCircle
                : "暂无"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :total="total"
        :currentPage="currentPage"
        :pageSize="pageSize"
        @changeSize="changeSize"
        @changePage="changePage"
      />
    </el-dialog>
  </div>
</template>
<script>
const txt = "确认添加";
import { add } from "@/api/oldCityFind/index.js";
import initData from "@/mixins/req";
import { Notification } from "element-ui";
export default {
  name: "add",
  mixins: [initData],
  props: {
    item: Object,
  },
  data() {
    return {
      title: "",
      show: false,
      loading: false,
      submitting: false,
      submitText: txt,
      searchQuery: {
        name: "", //名称
      },
      addIds: [],
    };
  },
  methods: {
    openCallback() {
      this.init();
    },
    search() {
      this.currentPage = 1;
      this.init();
    },
    reloadSearch() {
      this.search();
    },
    beforeInit() {
      this.url = "/Recommend/oldCityNoRecommendList";
      this.cType = 2;
      this.searchParams = {
        current: this.currentPage,
        limit: this.pageSize,
        ...this.searchQuery,
      };
      return true;
    },
    handleSelectionChange(val) {
      this.addIds = val.map((item) => item.id).join(",");
    },
    async confirmAdd() {
      if (this.addIds.length == 0) {
        Notification({
          title: "提示",
          message: "请选择要添加的古城",
          type: "warning",
        });
        return;
      }
      this.submitting = true;
      this.submitText = "添加中...";
      try {
        const req = add({ oldCityId: this.addIds,sort:1000 });
        const res = await req;
        setTimeout(() => {
          this.$emit("update");
          this.show = false;
        }, 300);
      } catch (error) {}
      this.submitText = txt;
      this.submitting = false;
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/page.scss";
@import "~@/assets/styles/table.scss";
>>> .el-select,
>>> .el-autocomplete {
  width: 100%;
}

>>> .el-dialog {
  min-height: 400px;
}

.loading-view {
  position: absolute;
  position: absolute;
  left: 0;
  top: 50px;
  bottom: 0;
  right: 0;
}
</style>
